<template>
    <view>
        <!-- 单列 -->
        <column1 v-if="mode === 0" :list="list" :config="config"></column1>
        <!-- 双列 -->
        <column2 v-if="mode === 1" :list="list" :config="config"></column2>
        <!-- 三列 -->
        <column3 v-if="mode === 2" :list="list" :config="config"></column3>
        <!-- 三列 允许滚动 -->
        <column4 v-if="mode === 3" :list="list" :config="config"></column4>
    </view>
</template>

<script lang="ts" setup>
/** 单列*/
import column1 from './components/Column-1/index.vue';
/** 双列*/
import column2 from './components/Column-2/index.vue';
/** 三列*/
import column3 from './components/Column-3/index.vue';
/** 横向滚动*/
import column4 from './components/Column-4/index.vue';

import { useUserStore } from '@/store'
import { computed, inject, ref } from 'vue'

const d = inject<any>('data')

const mode = computed(() => {
    return d.style.listStyle || 0
})
const config = computed(() => {
    let temp = d.style

    let res = {
        padding: `${temp.marginTopAndBottom}px ${temp.marginLeftAndRight}px`,
        labelStyle: {
            fontSize: temp.activeFontSize + 'px',
            color: temp.activeFontColor,
            lineHeight: temp.activeFontSize + 10 + 'px'
        },
        priceStyle: {
            color: temp.priceColor || 'red',
            fontSize: temp.priceFontSize + 'px',
            lineHeight: temp.priceFontSize + 10 + 'px'
        },
        titleStyle: {
            color: temp.goodsTitleColor || 'black',
            fontSize: temp.goodsTitleFontSize + 'px',
            maxHeight: (temp.goodsTitleFontSize + 10) * 3 + 'px',
            lineHeight: temp.goodsTitleFontSize + 10 + 'px'
        },
        backgroundColor: temp.backgroundColor,
        marginRight: (temp.marginRight || 0) + 'px',
        marginBottom: (temp.marginBottom || 0) + 'px',
        borderRadius: temp.imageStyle === 0 ? '20px' : 0,
        showStar: d.showSaleStarLevel,
        showLabel: d.showActiveList,
        showSuggest: d.showSuggest || false,
        showPrice: d.showPrice,
        showSales: d.showSale,
        starColor: temp.starColor,
        useWaterfall: temp.useWaterfall
    }
    return res
})

const userInfo = useUserStore().userInfo

let list = ref([])

getData()

function getData() {
    // 如果未登录  则没有userInfo  直接返回  但是存在登录token过期的情况
    if (!userInfo) return
    let para: any = {
        merchantType: userInfo.type,
        memberId: userInfo.memberId
    }

    let type = d.urls && d.urls[0].urlType
    if (type === 2) para.groupIds = d.urls.map((m: any) => m.urlId)
    if (type === 3) para.labelIds = d.urls.map((m: any) => m.urlId)
    if (type === 4) para.releaseIds = d.urls.map((m: any) => m.urlId)
    if (d.goodsOrder === 0) para.saleSort = 'desc'
    if (d.goodsOrder === 1) para.priceSort = 'desc'
    if (d.goodsOrder === 2) para.multiSort = 'desc'

    para = dealParams(para)
    uni.$u.$api.GoodsApi.queryGoodsReleasePage(para).then((res: any) => {
        if (res.records.length > 0) {
            list.value = res.records.slice(0, d.quantity)
        }
    })
}

/**
 * 当前环境下 的 参数处理  去除 空字符串  空数组 null 等情况
 * @param {Object} params 参数对象
 */
function dealParams(params: any) {
    for (let key in params) {
        // 去除空数组
        if (Array.isArray(params[key]) && params[key].length === 0) {
            delete params[key]
        }
        //
        if (params[key] === '' || params[key] == undefined || params[key] == null) {
            delete params[key]
        }
    }
    return params
}
</script>
